{% extends "layout.html" %}

{% block content %}
<div class="flex items-center flex-col mt-10 px-4">
  <h1 class="text-2xl text-bold">
    Tags
  </h1>
  <p class="text-bold text-xl mt-4">{{ terms | length }} tags</p>

  <div class="flex flex-wrap sm:flex-row flex-col sm:gap-x-7 gap-y-5 mt-6">
  {% for tag in terms %}
    <a href="{{ tag.permalink | safe }}" class="flex items-center space-x-2">
      <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"></path>
      </svg>
      <span class="text-bold">{{tag.name}} <sup>{{ tag.pages | length }}</sup></span>
    </a>
  {% endfor %}
  </div>
{% endblock content %}
